import 'dart:ui';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_learn_vi/src/bean/bean_video_course.dart';
import 'package:flutter_learn_vi/src/utils/navigator_utils.dart';

import 'course/main_course_page.dart';

/// 创建人： Created by zhaolong
/// 创建时间：Created by  on 2020/12/10.
///
/// 可关注公众号：我的大前端生涯   获取最新技术分享
/// 可关注网易云课堂：https://study.163.com/instructor/1021406098.htm
/// 可关注博客：https://blog.csdn.net/zl18603543572
///
/// 代码清单
///代码清单
///代码清单 5-27 TabBarView 中使用的标签页面
///lib/code/code5/example_504_CustomScrollView.dart
class VideoSearchItemPage extends StatefulWidget {
  final List<BeanVideoCourse> list;

  final double itemHeight;

  VideoSearchItemPage({@required this.list, this.itemHeight = 120});

  @override
  State<StatefulWidget> createState() {
    return _NewsItemPageState();
  }
}

class _NewsItemPageState extends State<VideoSearchItemPage>
    with AutomaticKeepAliveClientMixin {
  //标签页面保活 或者称保持状态
  @override
  bool get wantKeepAlive => true;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    if (widget.list == null || widget.list.length == 0) {
      return Container();
    }
    //一个列表 切记不要再使用 Scaffold
    //否则会拦截事件 失去滑动联动效果
    return ListView.builder(
      //去除内边距
      padding: EdgeInsets.all(0),
      //列表子Item个数
      itemCount: widget.list.length,
      //每个子Item的布局构建
      itemBuilder: (BuildContext context, int index) {
        return buildBodyWidget(index);
      },
    );
  }

  //每个子Item的布局构建
  Widget buildBodyWidget(int index) {
    BeanVideoCourse newsBean = widget.list[index];

    //水波纹点击事件监听
    return InkWell(
      //手指点击抬起时的回调
      onTap: () {
        //打开新的页面

        NavigatorUtils.pushPage(
            context,
            MainCoursePage(
              beanVideoCourse: newsBean,
            ));
        //showWebViewPage(context: context, pageUrl: newsBean.detailUrl);
      },
      child: Container(
          margin: EdgeInsets.only(bottom: 1),
          padding: EdgeInsets.only(left: 10, right: 10, bottom: 20),
          color: Colors.white,
          //线性布局左右排列
          child: Stack(
            children: [
              Column(
                mainAxisSize: MainAxisSize.min,
                //主轴方向开始对齐 在这里是左对齐
                mainAxisAlignment: MainAxisAlignment.start,
                //交叉轴上开始对齐 在这里是顶部对齐
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  //右侧的文本区域
                  buildRightTextArea(index, newsBean),
                  //顶部的图片
                  buildLeftImage(newsBean),
                ],
              ),
            ],
          )),
    );
  }

  ///顶部的图片区域
  Container buildLeftImage(BeanVideoCourse newsBean) {
    String url = newsBean.videoCourseImage;

    return Container(
      width: MediaQuery.of(context).size.width,
      height: widget.itemHeight,
      margin: EdgeInsets.only(right: 12),
      child: Card(
        elevation: 4.0,
        child: ClipRRect(
          borderRadius: BorderRadius.all(Radius.circular(4.0)),
          child: Container(
            color: Colors.grey,
            child: Stack(
              alignment: Alignment.center,
              children: [
                Positioned.fill(
                  child: CachedNetworkImage(
                    imageUrl: url,
                    fit: BoxFit.fill,
                  ),
                ),
                // Positioned.fill(
                //   child: BackdropFilter(
                //     filter: ImageFilter.blur(sigmaX: 0.3, sigmaY: 0.3),
                //     child: Container(
                //       color: Colors.white.withOpacity(0.4),
                //     ),
                //   ),
                // ),
                Stack(
                  alignment: Alignment.center,
                  children: [
                    ClipOval(
                      child: Container(
                        width: 30,
                        height: 30,
                        color: Colors.white,
                      ),
                    ),
                    Icon(
                      Icons.play_circle_filled_outlined,
                      color: Colors.black,
                      size: 40,
                    ),
                  ],
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

  ///右侧的文本区域
  Widget buildRightTextArea(int index, BeanVideoCourse newsBean) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: [
        SizedBox(
          height: 8,
        ),
        Container(
          padding: EdgeInsets.only(left: 10),
          margin: EdgeInsets.only(bottom: 10),
          child: Text(
            "${index + 1} ${newsBean.videoCourseName}",
            softWrap: true,
            overflow: TextOverflow.ellipsis,
            maxLines: 2,
            style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
          ),
        ),
      ],
    );
  }
}
